<template>
	<view style="margin-top: 20rpx" v-if="itemData.data.length>0">

        <view style="width: 95%;background:linear-gradient(to right,#6B2AFF,#8B46D5);margin: auto;padding:0 20rpx;border-radius: 20rpx 20rpx 0 0">
            <view style="height: 80rpx;overflow: hidden;border-radius:0 15rpx 0 0;display: flex;align-items: center;justify-content: space-between ">
                <view style="width: 30%;margin-left: 10rpx">
                    <view style="font-size: 32rpx;color: white">
                        直播间
                    </view>
                </view>
                <view  style="">
                    <view @click="gotoList" style="color: rgba(255,255,255,0.47)">
                        更多
                        <image src="/static/images/group/arrow.png" style="width: 25rpx;margin-left: 10rpx;display: inline-block" mode="widthFix"></image>
                    </view>
                </view>
            </view>
            <view style="height: 30rpx">
            </view>
        </view>

        <view style="background-color: white;border-radius: 20rpx;width: 95%;margin:-30rpx auto 20rpx;padding: 10rpx">
            <scroll-view scroll-x="true" style="white-space: nowrap">
                <block v-for="(item, index) in itemData.data" :key="index">
                    <view style="width: 45%;display: inline-block;;margin: 20rpx"   @click="gotoDetail(item)">
                        <view style="position: relative">
<!--                            <view style="width: 270rpx;height: 270rpx;border-radius: 24rpx;background-color: aqua">-->

<!--                            </view>-->
                            <image :src="item.share.file_path" style="width: 270rpx;height: 270rpx;border-radius: 24rpx" mode="aspectFill"></image>

                            <view class="state" :class="{bg101:item.live_status==101,bg102:item.live_status==102,bg103:item.live_status==104}"
                                  v-if="item.live_status==101||item.live_status==102||item.live_status==104">
                                {{convertStatus(item.live_status)}}
                            </view>

                        </view>
                        <view class="product-title linedot" style="margin-top: 10rpx" >{{ item.name }}</view>
                        <view style="font-size: 24rpx;color: #000000;display: flex;align-items: center">
                            <view>
                                <image src="/static/images/live/eye.png" style="width: 30rpx;display: inline-block;margin-bottom: 5rpx" mode="widthFix"></image>
                            </view>
                            <view style="font-size: 24rpx;color: rgba(0,0,0,0.55);margin-left: 10rpx">
                                {{item.view_num}}人
                            </view>

                        </view>


                    </view>

                </block>
            </scroll-view>
        </view>

	</view>
</template>

<script>
    var _self;
	export default {
		components: {},
		data() {
			return {};
		},
		props: ['itemData'],
		created() {
		    _self = this;
		    console.log(_self.itemData)
		    

		},
		methods: {

			scroll(e) {},

			/*状态转换*/
			convertStatus(num) {
				let str = '';
				switch (num) {
					case 101:
						str = '直播中';
						break;
					case 102:
						str = '未开始';
						break;
					case 103:
						str = '已结束';
						break;
					case 104:
						str = '禁播';
						break;
					case 105:
						str = '暂停';
						break;
					case 106:
						str = '异常';
						break;
					case 107:
						str = '已过期';
						break;
				}
				return str;
			},

			/*跳转列表*/
			gotoList() {
				this.gotoPage('/pages/plus/live/wx/list');
			},
			/*跳转产品详情*/
			gotoDetail(item) {
				// 第三方直播
				this.gotoPage('/pagesLive/live/live?room_id=' + item.room_id + "&sence=join");
			}
		}
	};
</script>

<style lang="scss">
	.diy-live {
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 0 20rpx 20rpx;
		background: #ffffff;
	}

	.diy-live .diy-head {
		height: 100rpx;
	}

	.diy-live .diy-head .name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.diy-live .list .item {
		width: 300rpx;
		margin-right: 20rpx;
	}

	.diy-live .list .item:nth-child(2n + 0) {
		margin-right: 0;
	}

	.diy-live .list .item .pic {
		width: 300rpx;
		height: 240rpx;
	}

	 .state {
		position: absolute;
		bottom: 15rpx;
		left: 10rpx;
		padding: 4rpx 15rpx;
		background: red;
		color: #FFFFFF;
		font-size: 22rpx;
		border-radius: 10rpx 10rpx 10rpx 30rpx;
		z-index: 100;
	}

	.bg101 {
		background: linear-gradient(0deg, #F6220C 0%, #FF7668 100%);
	}

	.bg102 {
		background: linear-gradient(0deg, #F87B16 0%, #FFA336 100%);
	}

	.bg103 {
		background: #333333;
	}

	.diy-live .list .item image {
		width: 300rpx;
		height: 240rpx;
		border-radius: 12rpx;
	}

	.live_name {
		margin: 20rpx 0;
	}
</style>
